<!--
 * @Description: 这是***页面
 * @Date: 2025-09-26 10:59:05
 * @Author: merrychen
 * @LastEditTime: 2025-09-26 11:56:29
-->
<template>
  <div ref="scholarAiRef" class="scholar-ai-chat-comp">
    <div class="content-wrap">
      <AXWelcome v-if="!messages.length" class="mb-4" variant="borderless"
        icon="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*s5sNRo5LjfQAAAAAAAAAAAAADgCCAQ/fmt.webp"
        title="Hello, I'm MINIKING"
        description="Base on Ant Design, AGI product interface solution, create a better intelligent vision~" />
      <AXChatBubble v-else class="bubble-list-wrap mb-4" :messages="messages" :loading="waitResponse"
        @new-chat="resetChat" />
    </div>
    <div class="sender-wrap">
      <AXSenderInput ref="senderInputRef" @messages-change="handleMessagesChange" @loading-change="handleLoading" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useDialogueStore } from '@store/modules/scholarDialogue';

const dialogueStores = useDialogueStore();
const chatHistory = computed(() => dialogueStores.getDialogueRecord);
const showHistory = computed(() => dialogueStores.getShowHistory);

// 在渲染聊天记录时，根据用户选择的历史对话实时更新页面
watch(
  () => chatHistory.value,
  (newChatHistory) => {
    if (showHistory.value) {
      messages.value = newChatHistory;
    }
  }
);

// 监听消息变化
const messages = ref<any[]>([]);
const handleMessagesChange = (newMessages: any[]) => {
  messages.value = newMessages;
};

// 等待对话响应
/**
 * 在用户将消息发出时触发 loading，接口响应，有返回值之后停止
 * 用户重置对话后，loading 也重置
 **/
const waitResponse = ref<boolean>(false);
const handleLoading = (loading: boolean) => {
  waitResponse.value = loading;
};

// 重置对话
const senderInputRef = ref();
const resetChat = () => {
  waitResponse.value = false;
  senderInputRef.value?.newChat();
};
</script>

<style lang="scss" scoped>
.scholar-ai-chat-comp {
  position: relative;
  min-height: calc(100vh - 85px - 2rem);

  .content-wrap {
    padding-bottom: 56px; // 为固定定位的 SenderInput 预留空间
  }

  .sender-wrap {
    position: absolute; // 解决输入框展开面板挤压对话区域的问题
    bottom: 0;
    z-index: 10;
    width: 100%;
    background: white;
  }

  .bubble-list-wrap {
    height: calc(100vh - 85px - 2rem - 1rem - 56px);
  }
}
</style>
